import React, { memo, useRef, useEffect } from "react";
import { shallowEqual, useSelector } from "react-redux";
import classnames from "classnames";

import "./index.scss";
import { scrollTo } from "@/utils/ui-helper";

const WYLyricPanel = memo(function (props) {
  // redux-
  const { lyricList, lyricIdx } = useSelector(
    (state) => ({
      lyricList: state.getIn(["play", "lyricList"]),
      lyricIdx: state.getIn(["play", "lyricIdX"]),
    }),
    shallowEqual
  );
  // useState + props
  // qita
  const panelRef = useRef();
  useEffect(() => {
    if (lyricIdx > -1 && lyricIdx < 3) {
      scrollTo(panelRef.current, 0, 300);
      return;
    }
    scrollTo(panelRef.current, (lyricIdx - 3) * 32, 300); //32是行高-每次走这么多
  }, [lyricIdx]);

  return (
    <div className="panel-lyric" ref={panelRef}>
      {lyricList.length > 0 &&
        lyricList.map((item, index) => (
          <div
            className={classnames(
              "lrc-item",
              lyricIdx === index ? "active" : ""
            )}
            key={index}
          >
            {item.content}
          </div>
        ))}
    </div>
  );
});

export default WYLyricPanel;
